﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery UI Max Length</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="jquery.maxlengthui.css" rel="stylesheet">
<link type="text/css" href="../common/demo.css" rel="stylesheet">
<style type="text/css">
textarea { width: 30em; border: 1px solid #3c8243; }
.kbw-maxlength-feedback { display: inline-block; width: 7em; margin: 1px 1em; padding: 0.25em; vertical-align: top; }
.keepTogether { display: inline-block; }
#styleLength + .kbw-maxlength-feedback { width: auto; margin: 0em 0em 1px 0.5em; vertical-align: bottom; }
#belowLength + .kbw-maxlength-feedback { display: block; width: 39.5em; margin-left: 20em; }
#overlaidLength { padding-top: 0.75em; }
#overlaidLength + .kbw-maxlength-feedback { position: relative; left: -5.25em; width: 4em; padding: 0em; text-align: right; }
#targetFeedback { width: 20em; margin: 0em; padding: 0.25em; background-color: #ddffe8; border: 1px solid #3c8243; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.maxlengthui.js"></script>
<script type="text/javascript" src="../common/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../common/demo.js"></script>
<script type="text/javascript">
$(function() {
	$('#download').click(function() {
		window.location = 'jquery.maxlengthui.package-1.0.0.zip';
	});
});
</script>
</head>
<body>
<h1>jQuery UI Max Length</h1>
<p>A <a href="http://jqueryui.com">jQuery UI</a> plugin
	that applies a maximum length to a textarea.</p>
<p>The current version is <span class="version">1.0.0</span> and is available 
	under the <a href="https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt">MIT</a> licence.
	For more detail see the <a href="maxlengthuiRef.html">documentation reference</a> page.
	Or see a <a href="maxlengthuiBasics.html">minimal page</a> that you could
	use as a basis for your own investigations.</p>
<p style="text-align: center;">
	<button type="button" id="download">Download now</button>
	<span id="bookmark"></span>
</p>
<div id="tabs">
	<ul>
		<li><a href="#default"><span>Defaults</span></a></li>
		<li><a href="#options"><span>Options</span></a></li>
		<li><a href="#metadata"><span>Metadata</span></a></li>
		<li><a href="#events"><span>Events</span></a></li>
		<li><a href="#styling"><span>Styling</span></a></li>
		<li><a href="#wild"><span>In the Wild</span></a></li>
		<li><a href="#quick"><span>Quick Ref</span></a></li>
	</ul>
	<div id="default" class="feature">
		<h2>Default Settings</h2>
		<p>The max length functionality can easily be added to a textarea
			with appropriate default settings.<br>
			You can also remove the max length functionality if it is no longer required,
			or disable or enable the field to receive input.</p>
		<p><span class="demoLabel">Default max length:</span>
			<textarea id="defaultLength" rows="3" cols="60"></textarea></p>
		<p><span class="demoLabel">&nbsp;</span>
			<button type="button" id="removeLength">Remove</button>
			<button type="button" id="disableLength">Disable</button></p>
		<pre><code class="jsdemo">$('#defaultLength').maxlength();

$('#removeLength').click(function() {
		if ($(this).text() == 'Remove') {
			$(this).text('Re-attach');
			$('#defaultLength').maxlength('destroy');
		}
		else {
			$(this).text('Remove');
			$('#defaultLength').maxlength();
		}
	});

$('#disableLength').click(function() {
		if ($(this).text() == 'Disable') {
			$(this).text('Enable');
			$('#defaultLength').maxlength('disable');
		}
		else {
			$(this).text('Disable');
			$('#defaultLength').maxlength('enable');
		}
	});</code></pre>
		<p style="clear: both;">You can override the defaults globally as shown below:</p>
		<pre><code class="js">$.extend($.kbw.maxlength.options, {showFeedback: true});</code></pre>
	</div>
	<div id="options" class="feature">
		<h2>Options</h2>
		<p>Customise the max length functionality through additional settings.</p>
		<p><span class="demoLabel">Different length:</span>
			<textarea id="otherLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#otherLength').maxlength({max: 300});</code></pre>
		<p><span class="demoLabel">Don't truncate text:</span>
			<textarea id="truncateLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#truncateLength').maxlength({truncate: false});</code></pre>
		<p><span class="demoLabel">No feedback shown:</span>
			<textarea id="noShowLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#noShowLength').maxlength({showFeedback: false});</code></pre>
		<p><span class="demoLabel">Custom feedback:</span>
			<textarea id="feedbackLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#feedbackLength').maxlength({feedbackText: 'Used {c} of {m}'});</code></pre>
		<p><span class="demoLabel">Feedback only when active:</span>
			<textarea id="activeLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#activeLength').maxlength({showFeedback: 'active'});</code></pre>
		<p><span class="demoLabel">Feedback in another element:</span>
			<span class="keepTogether">
				<span id="targetFeedback">&nbsp;</span><br>
				<textarea id="targetLength" rows="3" cols="60"></textarea>
			</span></p>
		<pre><code class="jsdemo">$('#targetLength').maxlength({
	feedbackTarget: '#targetFeedback'});</code></pre>
	</div>
	<div id="metadata" class="feature">
		<h2>Metadata</h2>
		<p>Customise the max length functionality through inline metadata -
			requires the Metadata plugin.</p>
		<p><span class="demoLabel">Different length:</span>
			<textarea id="meta1Length" rows="3" cols="60" class="{maxlength: {max: 300}}"></textarea></p>
		<pre><code class="jsdemo">$('#meta1Length').maxlength();</code></pre>
		<pre><code class="htmldemo">&lt;textarea id="meta1Length" rows="3" cols="60"
	class="{maxlength: {max: 300}}"&gt;&lt;/textarea&gt;</code></pre>
		<p><span class="demoLabel">Custom feedback:</span>
			<textarea id="meta2Length" rows="3" cols="60" class="{maxlength: {feedbackText: 'Used {c} of {m}'}}"></textarea></p>
		<pre><code class="jsdemo">$('#meta2Length').maxlength();</code></pre>
		<pre><code class="htmldemo">&lt;textarea id="meta2Length" rows="3" cols="60"
	class="{maxlength: {feedbackText: 'Used {c} of {m}'}}"&gt;&lt;/textarea&gt;</code></pre>
	</div>
	<div id="events" class="feature">
		<h2>Events</h2>
		<p>You can be notified when the textarea has filled via the <code>full</code> setting.</p>
		<p><span class="demoLabel">When full:</span>
			<textarea id="whenFullLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#whenFullLength').maxlength({truncate: false,
	full: function(event, ui) {
		if (!ui.overflow) { // Notify via an alert
			alert('The field is full');
		}
		else { // Flash styling
			var self = $(this);
			self.removeClass('ui-state-error');
			setTimeout(function() {
					self.addClass('ui-state-error');
				}, 250);
		}
	}});</code></pre>
	</div>
	<div id="styling" class="feature">
		<h2>Styling</h2>
		<p>You can adjust the appearance of the textarea and feedback via CSS.
			The default is to place the feedback immediately after the textarea
			with a slightly reduced font size.</p>
		<p>The textarea is marked with the <code>kbw-maxlength</code>
			class once initialised and any feedback element is marked with the
			<code>kbw-maxlength-feedback</code> and <code>ui-state-default</code> classes.</p>
		<p>Both the textarea and its feedback are marked with the <code>ui-state-highlight</code>
			class when the textarea is full, and also with the <code>ui-state-error</code>
			class when even more text is entered.</p>
		<p><span class="demoLabel">Default style:</span>
			<textarea id="styleLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#styleLength').maxlength();</code></pre>
		<p><span class="demoLabel">Style used here:</span>
			<textarea id="hereLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#hereLength').maxlength();</code></pre>
		<pre><code class="css">.kbw-maxlength-feedback { display: inline-block;
	width: 7em; margin: 1px 1em; padding: 0.25em; vertical-align: top; }</code></pre>
		<p><span class="demoLabel">Feedback below:</span>
			<textarea id="belowLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#belowLength').maxlength();</code></pre>
		<pre><code class="css">#belowLength + .kbw-maxlength-feedback { display: block;
	width: 39.5em; margin-left: 20em; }</code></pre>
		<p><span class="demoLabel">Overlaid feedback:</span>
			<textarea id="overlaidLength" rows="3" cols="60"></textarea></p>
		<pre><code class="jsdemo">$('#overlaidLength').maxlength({feedbackText: '{c}/{m}'});</code></pre>
		<pre><code class="css">#overlaidLength { padding-top: 0.75em; }
#overlaidLength + .kbw-maxlength-feedback {position: relative;
	left: -5.25em; width: 4em; padding: 0em; text-align: right; }</code></pre>
	</div>
	<div id="wild" class="feature">
		<h2>In the Wild</h2>
		<p>This tab highlights examples of this plugin in use "in the wild".</p>
		<div id="wildLinks">
			<div>
				<h3><!--a href=""></a--></h3>
				<p>None as yet.</p>
			</div>
		</div>
		<p style="clear: both;">To add another example, please contact me (kbwood{at}iinet.com.au)
			and provide the plugin name, the URL of your site, its title,
			and a short description of its purpose and where/how the plugin is used.</p>
	</div>
	<div id="quick" class="feature">
		<h2>Quick Reference</h2>
		<p>A full list of all possible settings is shown below.
			Note that not all would apply in all cases. For more detail see the
			<a href="maxlengthuiRef.html">documentation reference</a> page.</p>
		<pre><code class="js">$(selector).maxlength({
	max: 200, // Maximum length
	truncate: true, // True to disallow further input, false to highlight only
	showFeedback: true, // True to always show user feedback, 'active' for hover/focus only
	feedbackTarget: null, // jQuery selector or function for element to fill with feedback
	feedbackText: '{r} characters remaining ({m} maximum)',
		// Display text for feedback message, use {r} for remaining characters,
		// {c} for characters entered, {m} for maximum
	overflowText: '{o} characters too many ({m} maximum)',
		// Display text when past maximum, use substitutions above
		// and {o} for characters past maximum
	full: null // Callback when full or overflowing,
		// receives two parameters: the triggering event and
		// an object with attribute overflow set to true if overflowing, false if not
});

$.kbw.maxlength.options // Access settings for all instances

$(selector).maxlength('option', settings) // Change the instance settings
$(selector).maxlength('option', name, value) // Change an instance setting

$(selector).maxlength('option') // Retrieve the instance settings

$(selector).maxlength('enable') // Enable the max length functionality
$(selector).maxlength('disable') // Disable the max length functionality

$(selector).maxlength('destroy') // Remove the max length functionality</code></pre>
	</div>
</div>
<h2>Usage</h2>
<ol>
<li>Include the jQuery and jQuery UI libraries and CSS in the head section of your page.
	<pre><code class="html">&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css" rel="stylesheet"&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"&gt;&lt;/script&gt;</code></pre></li>
<li>Download and include the jQuery UI Max Length CSS and JavaScript in the head section of your page.
	<pre><code class="html">&lt;style type="text/css"&gt;@import "jquery.maxlengthui.css";&lt;/style&gt;
&lt;script type="text/javascript" src="jquery.maxlengthui.js"&gt;&lt;/script&gt;</code></pre>
    Alternately, you can use the minified version
	<code>jquery.maxlengthui.min.js</code> (4.9K vs 8.0K, 1.5K when zipped).</li>
<li>Connect the max length functionality to your textareas.
	<pre><code class="js">$(selector).maxlength();</code></pre>
	You can include custom settings as part of this process.
	<pre><code class="js">$(selector).maxlength({max: 300});</code></pre></li>
</ol>
<p> For more detail see the
	<a href="maxlengthuiRef.html">documentation reference</a> page.
	Or see a <a href="maxlengthuiBasics.html">minimal page</a> that you could
	use as a basis for your own investigations.</p>
<h2>Comments</h2>
<p>None as yet.</p>
<p style="clear: both;">Contact Keith Wood at kbwood{at}iinet.com.au 
	with comments or suggestions.</p>
<h2><a name="changes">Change History</a></h2>
<table border="0" id="history" width="100%">
<tr><th>Version</th><th>Date</th><th>Changes</th></tr>
<tr><td>1.0.0</td><td>12&nbsp;Jan&nbsp;2013</td><td><ul>
	<li>Initial release</li>
</ul></td></tr>
</table>
<hr>
<p>
	<a id="valid" href="http://validator.w3.org/check">
		<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"></a>
</p>
</body>
</html>
